<script lang="ts" setup>
import { useGlobalStore } from '@/stores/modules/global'
import { useThemeStore } from '@/stores/modules/theme'
import { useTabsStore } from '@/stores/modules/tabs'
import { useKeepAliveStore } from '@/stores/modules/keepAlive'
import type { Menu } from '@/components/layout/SubMenu/interface'
import demoService from '@/api/modules/demo'

const router = useRouter()
const globalStore = useGlobalStore()
const themeStore = useThemeStore()
const tabStore = useTabsStore()
const keepAliveStore = useKeepAliveStore()

let menuList: Menu.MenuOptions[] = [
  {
    icon: 'all',
    isKeepAlive: true,
    isAffix: true,
    title: '主题预览',
    path: '/demo/themeDemo'
  },
  {
    icon: 'home',
    isKeepAlive: true,
    isAffix: true,
    title: '首页',
    path: '/'
  },
  {
    icon: 'home',
    isHide: true,
    isAffix: true,
    title: '首页2',
    path: '/index2'
  },
  {
    icon: 'paperclip',
    isKeepAlive: true,
    title: '外部链接',
    path: '/link',
    redirect: '/link/baidu',
    children: [
      {
        icon: 'all',
        isKeepAlive: true,
        title: 'Baidu 内嵌',
        path: '/link/baidu'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        isLink: 'http://yycxchina.com',
        title: '阳洋出行官网',
        path: '/link/yycxchina'
      }
    ]
  },
  {
    icon: 'all',
    isKeepAlive: false,
    title: '菜单嵌套',
    path: '/menu',
    redirect: '/menu/menu1/menu1_1',
    children: [
      {
        icon: 'all',
        isKeepAlive: false,
        title: '菜单1',
        path: '/menu/menu1',
        redirect: '/menu/menu1/menu1_1',
        children: [
          {
            icon: 'all',
            isKeepAlive: false,
            title: '菜单1_1',
            path: '/menu/menu1/menu1_1'
          },
          {
            icon: 'all',
            isHide: true,
            isKeepAlive: true,
            title: '菜单1_2',
            activeMenu: '/menu/menu1/menu1_3',
            path: '/menu/menu1/menu1_2'
          },
          {
            icon: 'all',
            isKeepAlive: true,
            title: '菜单1_3',
            path: '/menu/menu1/menu1_3'
          }
        ]
      },
      {
        icon: 'all',
        isKeepAlive: true,
        title: '菜单2',
        path: '/menu/menu2'
      }
    ]
  },
  {
    icon: 'all',
    isKeepAlive: false,
    isAffix: false,
    title: 'DEMO',
    path: '/demo',
    redirect: '/demo/countdownup',
    children: [
      {
        icon: 'all',
        isKeepAlive: true,
        isAffix: false,
        title: '菜单配置',
        path: '/demo/menuConfig'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        isAffix: false,
        title: '正倒计时',
        path: '/demo/countdownup'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        isAffix: false,
        title: '图片预览API/指令',
        path: '/demo/previewImage'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        isAffix: false,
        title: 'PDF预览API',
        path: '/demo/previewPDF'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        isAffix: false,
        title: 'Excel预览API',
        path: '/demo/previewExcel'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        isAffix: false,
        title: '页面离开提醒',
        path: '/demo/leavetips'
      },
      {
        icon: 'all',
        isKeepAlive: false,
        isAffix: false,
        title: '复制指令',
        path: '/demo/copy'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        title: '表格',
        path: '/demo/proTableDemo'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        title: '地图',
        path: '/demo/mapDemo'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        title: '表单弹窗',
        path: '/demo/dialogDemo'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        title: '富文本编辑器',
        path: '/demo/wangEditorDemo'
      },
      {
        icon: 'all',
        title: '布局示例',
        path: '/demo/layout',
        redirect: '/demo/layout/layoutCard',
        children: [
          {
            icon: 'all',
            isKeepAlive: true,
            title: '内部滚动(默认)',
            path: '/demo/layout/layoutCard'
          },
          {
            icon: 'all',
            isKeepAlive: true,
            title: '内部滚动(侧栏)',
            path: '/demo/layout/layoutCardAside'
          },
          {
            icon: 'all',
            isKeepAlive: true,
            title: '超出滚动',
            path: '/demo/layout/layoutOverflow'
          },
          {
            icon: 'all',
            isKeepAlive: true,
            title: '居中卡片',
            path: '/demo/layout/layoutCenter'
          },
          {
            icon: 'all',
            isKeepAlive: true,
            title: '居中卡片(侧栏)',
            path: '/demo/layout/layoutCenterAside'
          }
        ]
      }
    ]
  }
]

const themeValue = ref()
const themeList = [
  {
    name: '系统管理中心',
    color: '#0055FE',
    mapType: 'GaoDe'
  },
  {
    name: '成都公车管理系统',
    color: '#0511F2',
    mapType: 'GaoDe'
  },
  {
    name: '乐山公车管理系统',
    color: '#F39C12',
    mapType: 'GaoDe'
  },
  {
    name: '巴中公车管理系统',
    color: '#409EFF',
    mapType: 'GaoDe'
  },
  {
    name: '测试页面权限',
    color: '#ff0000',
    mapType: 'GaoDe'
  },
  {
    name: '测试天地图',
    color: '#ff0000',
    mapType: 'TianDiTu'
  }
]
watch(themeValue, (newVal) => {
  // 根据平台设置平台
  themeStore.updateThemeConfig({
    name: newVal.name,
    colorPrimary: newVal.color,
    colorInfo: '#909399', //element-plus默认
    colorSuccess: '#67C23A', //element-plus默认
    colorWarning: '#E6A23C', //element-plus默认
    colorDanger: '#F56C6C', //element-plus默认
    mapType: newVal.mapType
  })
  themeStore.loadTheme()
})
const handleLogin = async () => {
  if (!themeValue.value) {
    ElMessage.error('请选择地区')
    return
  }
  if (themeValue.value.name === '测试页面权限') {
    menuList = [
      {
        icon: 'home',
        isKeepAlive: true,
        isAffix: true,
        title: '首页',
        path: '/'
      },
      {
        icon: 'all',
        isKeepAlive: true,
        title: '菜单嵌套',
        path: '/menu',
        children: [
          {
            icon: 'all',
            isKeepAlive: false,
            title: '菜单22',
            path: '/menu/menu2'
          }
        ]
      }
    ]
  }
  const { data } = await demoService.login('17711069103', 'a1111111')
  globalStore.setToken(data.token)
  globalStore.setMenuList(menuList)
  tabStore.setTabs([])
  keepAliveStore.setKeepAliveName([])
  const affixItem = menuList.find((item) => item.isAffix === true)
  if (affixItem) {
    router.push(affixItem.path)
  }
}
</script>

<template>
  <el-card shadow="always" style="width: 500px; margin: 200px auto">
    <template #header>
      <div>公车登录</div>
    </template>

    <el-select v-model="themeValue" placeholder="请选择地区" value-key="name">
      <el-option v-for="(item, index) in themeList" :key="index" :label="item.name" :value="item" />
    </el-select>
    <el-button type="primary" size="default" @click="handleLogin">登录</el-button>
  </el-card>
</template>

<style lang="scss" scoped></style>

<route lang="yaml">
meta:
  layout: none
</route>
